<template>
  <div class="email-inbox">
    <div class="inbox-header">
     <div class="header-left">
        <h1>收件箱</h1>
        <el-popover
          placement="bottom-start"
          :width="220"
          trigger="click"
        >
          <template #reference>
            <svg class="filter-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="currentColor">
              <path fill-rule="evenodd" d="M2.005 4.88c0-.483.392-.875.875-.875h10.24a.875.875 0 0 1 0 1.75H2.88a.875.875 0 0 1-.875-.875m1 5c0-.483.392-.875.875-.875h8.24a.875.875 0 1 1 0 1.75H3.88a.875.875 0 0 1-.875-.875m1.875 4.125a.875.875 0 1 0 0 1.75h6.24a.875.875 0 1 0 0-1.75z" clip-rule="evenodd"></path>
            </svg>
          </template>
          <div class="filter-popover">
            <div class="filter-title">筛选</div>
            <div class="filter-option">
              <el-button
                size="small"
                :type="filterType === 'all' ? 'primary' : ''"
                @click="filterType = 'all'"
                block
              >全部</el-button>
            </div>
            <div class="filter-option">
              <el-button
                size="small"
                :type="filterType === 'unread' ? 'primary' : ''"
                @click="filterType = 'unread'"
                block
              >未读</el-button>
            </div>
            <div class="filter-option">
              <el-button
                size="small"
                :type="filterType === 'withAttachment' ? 'primary' : ''"
                @click="filterType = 'withAttachment'"
                block
              >包含附件</el-button>
            </div>
            <div class="filter-option">
              <el-button
                size="small"
                :type="filterType === 'fromContacts' ? 'primary' : ''"
                @click="filterType = 'fromContacts'"
                block
              >来自联系人</el-button>
            </div>

            <div class="filter-title">排序方式</div>
            <div class="filter-option">
              <el-button
                size="small"
                :type="sortType === 'dateDesc' ? 'primary' : ''"
                @click="sortType = 'dateDesc'"
                block
              >按日期 由新到旧</el-button>
            </div>
            <div class="filter-option">
              <el-button
                size="small"
                :type="sortType === 'size' ? 'primary' : ''"
                @click="sortType = 'size'"
                block
              >按大小</el-button>
            </div>
          </div>
        </el-popover>
      </div>

      <div class="action-buttons">
        <el-button-group>
          <el-button size="small" @click="deleteSelected">
            <el-icon><Delete /></el-icon> 删除
          </el-button>
          <el-button size="small" @click="forwardSelected">
            <el-icon><Share /></el-icon> 转发
          </el-button>
          <el-button size="small" @click="reportSelected">
            <el-icon><Warning /></el-icon> 举报
          </el-button>
          <el-button size="small" @click="markAllAsRead">
            <el-icon><CircleCheck /></el-icon> 全部已读
          </el-button>
          <el-dropdown @command="handleMarkCommand">
            <el-button size="small">
              <el-icon><PriceTag /></el-icon> 标记为<el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="important">重要</el-dropdown-item>
                <el-dropdown-item command="starred">星标</el-dropdown-item>
                <el-dropdown-item command="unread">标记未读</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown @command="handleMoveCommand">
            <el-button size="small">
              <el-icon><Folder /></el-icon> 移动到<el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="inbox">收件箱</el-dropdown-item>
                <el-dropdown-item command="drafts">草稿箱</el-dropdown-item>
                <el-dropdown-item command="spam">垃圾邮件</el-dropdown-item>
                <el-dropdown-item command="trash">已删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
      </div>
    </div>

    <!-- 昨天邮件分组 -->
    <div class="email-group">
      <h2 class="group-title">昨天(2 封)</h2>
      <email-table
        :emails="filteredYesterdayEmails"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      />
    </div>

    <!-- 上周邮件分组 -->
    <div class="email-group">
      <h2 class="group-title">上周(5 封)</h2>
      <email-table
        :emails="filteredLastWeekEmails"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      />
    </div>

    <!-- 更早邮件分组 -->
    <div class="email-group">
      <h2 class="group-title">更早</h2>
      <email-table
        :emails="filteredOlderEmails"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      />
    </div>

    <!-- 邮件预览 -->
    <div class="email-preview" v-if="selectedEmail">
      <div class="preview-header">
        <h3>{{ selectedEmail.subject }}</h3>
        <div class="preview-meta">
          <span class="sender">{{ selectedEmail.sender }}</span>
          <span class="time">{{ selectedEmail.time }}</span>
        </div>
      </div>
      <div class="preview-content">
        <p>{{ selectedEmail.content }}</p>
        <div v-if="selectedEmail.links" class="preview-links">
          <a v-for="(link, index) in selectedEmail.links" :key="index" :href="link" target="_blank">{{ link }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import {
  Delete,
  Share,
  Warning,
  CircleCheck,
  PriceTag,
  ArrowDown,
  Folder,
} from '@element-plus/icons-vue';
import EmailTable from '../../../components/EmailBox.vue';

const selectedEmail = ref(null);
const selectedEmails = ref([]);
const filterType = ref('all');
const sortType = ref('dateDesc');

// 邮件数据
const yesterdayEmails = ref([
  {
    id: 1,
    sender: '前程无忧(51Job)',
    subject: 'Together AI',
    time: '昨天 08:20',
    content: 'Kimi K2 is live: frontier performance at open-source economics -- Hi, Big news: Kimi K2 is now available on Together All T...',
    read: false,
    starred: false,
    important: false,
    hasAttachment: false,
    fromContact: false
  },
  {
    id: 2,
    sender: '前程无忧(51Job)',
    subject: '桌面运维工程师 (双休) 职位邀约',
    time: '昨天 10:15',
    content: '(AD) ，您收到一条 桌面运维工程师 (双休) 职位邀约，7千-1.2万，感兴趣疑惑 -> 如无法正常浏览，请点击这里 [退出] [举报] Dear...',
    read: false,
    starred: false,
    important: false,
    hasAttachment: true,
    fromContact: false
  }
]);

const lastWeekEmails = ref([
  {
    id: 3,
    sender: '前程无忧(51Job)',
    subject: '前程无忧',
    time: '7月9日',
    content: '',
    read: true,
    starred: false,
    important: false,
    hasAttachment: false,
    fromContact: true
  },
  {
    id: 4,
    sender: 'HR',
    subject: 'Web前端开发工程师职位邀请',
    time: '7月9日',
    content: '你被 微信云信息技术开发与化有限公司 的 Web 前端开发工程师 职位发起投票邀请，HR 在线，期待你发表消息 -- (AD) 如无法正...',
    read: true,
    starred: false,
    important: true,
    hasAttachment: true,
    fromContact: true
  },
  {
    id: 5,
    sender: 'HR',
    subject: 'Web前端开发工程师职位邀请',
    time: '7月9日',
    content: '你被 微信云信息技术开发与化有限公司 的 Web 前端开发工程师 职位发起投票邀请，HR 在线，期待你发表消息 -- (AD) 如无法正...',
    read: true,
    starred: false,
    important: true,
    hasAttachment: false,
    fromContact: true
  },
  {
    id: 6,
    sender: 'HR',
    subject: 'Web前端开发工程师职位邀请',
    time: '7月9日',
    content: '你被 微信云信息技术开发与化有限公司 的 Web 前端开发工程师 职位发起投票邀请，HR 在线，期待你发表消息 -- (AD) 如无法正...',
    read: true,
    starred: false,
    important: true,
    hasAttachment: true,
    fromContact: true
  },
  {
    id: 7,
    sender: 'HR',
    subject: 'Web前端开发工程师职位邀请',
    time: '7月9日',
    content: '你被 微信云信息技术开发与化有限公司 的 Web 前端开发工程师 职位发起投票邀请，HR 在线，期待你发表消息 -- (AD) 如无法正...',
    read: true,
    starred: false,
    important: true,
    hasAttachment: false,
    fromContact: true
  }
]);

const olderEmails = ref([
  {
    id: 8,
    sender: 'Cesium',
    subject: 'Welcome to Cesium!',
    time: '7月3日',
    content: 'Welcome to Cesium! Dear Subscriber, You are now signed up to receive emails. Thank you for your Interest in Cesium. Check out t...',
    read: true,
    starred: false,
    important: false,
    hasAttachment: false,
    fromContact: false
  },
  {
    id:9,
    sender: 'Cesium',
    subject: 'Verify your email',
    time: '7月2日',
    content: 'Welcome to Cesium ion: Please verify your email Welcome to Cesium ion, the platform for 3D geospatial. Please use the following...',
    read: true,
    starred: false,
    important: false,
    hasAttachment: true,
    fromContact: false
  },
  {
    id: 10,
    sender: '天津·北京区新闻会',
    subject: '关注微信公众号',
    time: '6月30日',
    content: '【天津·北京区新闻会】，天津市关注微信公众号"http://www.sjznews.com"获取更多资料。',
    links: ['https://www.sjznews.com'],
    read: true,
    starred: false,
    important: false,
    hasAttachment: false,
    fromContact: false
  },
  {
    id: 11,
    sender: 'Vercel',
    subject: 'Monthly Product Update',
    time: '6月28日',
    content: 'Vercel Monthly Product Update',
    links: ['https://www.vercel.com'],
    read: true,
    starred: false,
    important: false,
    hasAttachment: true,
    fromContact: false
  },
  {
    id: 12,
    sender: '石家庄·长安区新闻会',
    subject: '前端初级Web工程师职位邀请',
    time: '6月25日',
    content: '【石家庄·长安区新闻会】，您的简历受到青睐！邀您投递 前端初级Web工程师 职位，8千-1.1万-13新，人事经理期待沟通-- (AD) 6月25日',
    read: true,
    starred: false,
    important: false,
    hasAttachment: false,
    fromContact: false
  },
  {
    id: 13,
    sender: 'Gitee',
    subject: '重置密码信息',
    time: '6月24日',
    content: 'Gitee | Gitee 重置密码信息',
    links: ['https://gitee.com'],
    read: true,
    starred: false,
    important: false,
    hasAttachment: true,
    fromContact: false
  },
  {
    id: 14,
    sender: 'HR',
    subject: '工资通知单',
    time: '6月24日',
    content: '2025年05月工资通知单_155_9602 您好，工资单中见附件，请查阅！特别提醒：1.根据薪酬信息，为保证。',
    links: ['https://gitee.com'],
    read: true,
    starred: false,
    important: true,
    hasAttachment: true,
    fromContact: true
  }
]);

// 计算属性：根据筛选条件过滤邮件
const filteredEmails = computed(() => {
  let filtered = [...yesterdayEmails.value, ...lastWeekEmails.value, ...olderEmails.value];

  switch(filterType.value) {
    case 'unread':
      return filtered.filter(email => !email.read);
    case 'withAttachment':
      return filtered.filter(email => email.hasAttachment);
    case 'fromContacts':
      return filtered.filter(email => email.fromContact);
    default:
      return filtered;
  }
});

// 计算属性：分组后的邮件
const filteredYesterdayEmails = computed(() => {
  return filteredEmails.value.filter(email => yesterdayEmails.value.some(e => e.id === email.id));
});

const filteredLastWeekEmails = computed(() => {
  return filteredEmails.value.filter(email => lastWeekEmails.value.some(e => e.id === email.id));
});

const filteredOlderEmails = computed(() => {
  return filteredEmails.value.filter(email => olderEmails.value.some(e => e.id === email.id));
});

// // 处理筛选变化
// const handleFilterChange = (value) => {
//   filterType.value = value;
// };

// // 处理排序变化
// const handleSortChange = (value) => {
//   sortType.value = value;
//   // 这里可以添加排序逻辑
// };

const handleRowClick = (row) => {
  selectedEmail.value = row;
  row.read = true;
};

const handleSelectionChange = (selection) => {
  selectedEmails.value = selection;
};

const deleteSelected = () => {
  console.log('删除选中邮件:', selectedEmails.value);
  // 实际删除逻辑
  const idsToDelete = selectedEmails.value.map(email => email.id);
  yesterdayEmails.value = yesterdayEmails.value.filter(email => !idsToDelete.includes(email.id));
  lastWeekEmails.value = lastWeekEmails.value.filter(email => !idsToDelete.includes(email.id));
  olderEmails.value = olderEmails.value.filter(email => !idsToDelete.includes(email.id));
  selectedEmails.value = [];
};

const forwardSelected = () => {
  console.log('转发选中邮件:', selectedEmails.value);
};

const reportSelected = () => {
  console.log('举报选中邮件:', selectedEmails.value);
};

const markAllAsRead = () => {
  [...yesterdayEmails.value, ...lastWeekEmails.value, ...olderEmails.value].forEach(email => {
    email.read = true;
  });
};

const handleMarkCommand = (command) => {
  selectedEmails.value.forEach(email => {
    switch(command) {
      case 'important':
        email.important = !email.important;
        break;
      case 'starred':
        email.starred = !email.starred;
        break;
      case 'unread':
        email.read = false;
        break;
    }
  });
};
</script>

<style lang="scss" scoped>
.email-inbox {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;

      h1 {
        font-size: 24px;
        color: #303133;
        margin: 0;
      }

      .filter-icon {
        cursor: pointer;
        transition: color 0.2s;

        &:hover {
          color: #409eff;
        }
      }
    }

    .action-buttons {
      .el-button-group {
        .el-button {
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }
    }
  }

  .email-group {
    margin-bottom: 30px;

    .group-title {
      font-size: 16px;
      color: #666;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #ebeef5;
      font-weight: normal;
    }
  }

  .email-preview {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ebeef5;

    .preview-header {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;

      h3 {
        font-size: 18px;
        color: #303133;
        margin: 0 0 10px 0;
      }

      .preview-meta {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #909399;

        .sender {
          font-weight: 500;
        }
      }
    }

    .preview-content {
      p {
        margin: 0 0 15px 0;
        line-height: 1.6;
        color: #606266;
      }

      .preview-links {
        margin-top: 10px;

        a {
          display: block;
          color: #409eff;
          text-decoration: none;
          margin-bottom: 5px;
          word-break: break-all;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

.filter-popover {
  padding: 12px;

  .filter-title {
    font-size: 13px;
    color: #606266;
    font-weight: 500;
    margin: 8px 0 4px 0;
    padding-left: 4px;
  }

  .filter-option {
    margin-bottom: 6px;

    .el-button {
      width: 100%;
      text-align: left;
      padding: 8px 12px;
      border-radius: 4px;
      justify-content: flex-start;

      &:not(.is-primary) {


        color: #606266;
      }
    }
  }
}

.filter-icon {
  cursor: pointer;
  transition: color 0.2s;

  &:hover {
    color: #409eff;
  }
}
}
</style>
